<!--
 * @Author: your name
 * @Date: 2022-03-20 16:21:16
 * @LastEditTime: 2022-03-20 16:21:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\login\Register\register.vue
-->
<template>
  <el-dialog
    :visible="registerDialogVisible"
    title="注册"
    width="30%"
    custom-class="launch-assess"
    :before-close="closeDialog"
    :append-to-body="true"
    :center="true"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input v-model="form.telephone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="签名" prop="remark">
        <el-input
          type="textarea"
          v-model="form.remark"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="用户头像" prop="avatar">
        <Upload
          :limit="2"
          :isImgLoadModel="true"
          v-if="!uploadImgsPreview.length"
          @success="uploadSuccessCallback($event)"
        >
        </Upload>
        <Preview-img
          :uploadImgsPreview="uploadImgsPreview"
          @deleteImg="deleteImg"
        ></Preview-img>
      </el-form-item>
      <!-- <el-form-item>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="onSubmit">创建</el-button>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">创建</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入上传的组件
import Upload from '@/components/upload/upload'
// 导入图片预览组件
import PreviewImg from '@/components/PreviewImg/Previewimg'
// 导入接口
import { addUser } from '@/api/user'
export default {
  name: 'Register',
  props: {
    registerDialogVisible: { type: Boolean, default: false }
  },
  components: {
    Upload,
    PreviewImg
  },
  data() {
    return {
      uploadImgsPreview: [],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        avatar: [{ required: true, message: '请上传头像', trigger: 'change' }],
        telephone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        birthday: [
          { required: true, message: '请选择生日', trigger: 'change' }
        ],
        remark: [{ required: true, message: '请输入签名', trigger: 'blur' }]
      },
      form: {
        username: '',
        password: '',
        sex: '',
        avatar: '',
        telephone: '',
        birthday: '',
        remark: ''
      }
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.resetForm()
      this.$emit('update:registerDialogVisible', false)
    },
    // 确认按钮
    confirm() {},
    onSubmit() {
      this.$refs.form.validate(async (valid, obj) => {
        if (valid) {
          addUser({ ...this.form }).then((res) => {
            if (res.code == 200) {
              this.$message.success('创建成功')
              this.closeDialog()
            }
          })
        } else {
          for (let key in obj) {
            this.$message.error(obj[key][0].message)
            return false
          }
        }
      })
    },

    // 删除图片的
    deleteImg() {},
    uploadSuccessCallback(e) {
      console.log('成功的回调', e)
      this.form.avatar = e.imgUrl
      this.uploadImgsPreview.push(e.imgUrl)
    },

    // 重置表单 和 校验
    resetForm() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scope>
.launch-assess {
  // .el-dialog__header {
  //   display: none;
  // }
  .el-dialog__body {
    // padding: 20px 20px;
    padding-bottom: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  .el-date-editor,
  .el-select {
    width: 100%;
  }
}
</style>
